<template>
  <view catchtouchmove>
    <slot></slot>
    <view v-if="curIndex || curIndex === 0" class="popBox">
      <view v-for="(item, index) in articleList" :key="item.id">
        <view v-if="index === curIndex" class="popBody">
          <view class="head">
            <view class="title">{{ item.title }}</view>
          </view>
          <view class="popCon scrollParentHeight">
            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
              <rich-text class="scrollHeight" :nodes="item.content" bindtap="tap"></rich-text>
            </scroll-view>
          </view>
          <view class="popFoot">
            <view v-if="notArriveBottom" class="spans center gray">请向上滑动直到底部</view>
            <view v-else class="spans center">
              <view @click="center">阅读并同意</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 阅读协议同意组件
 */
import { getArticleDetails } from '@/api/join.js';
import { articleArr } from '@/common/baseUrl';
export default {
  props: {
    // 是否展示搜索按钮
    title: {
      type: String,
      default: '标题'
    },
    content: {
      type: String,
      default: '内容'
    },
    articleIndex: {
      type: Number,
      default: 1
    },
    idArr: {
      type: Array,
      default: articleArr
    }
  },
  data() {
    return {
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      notArriveBottom: true,
      articleList: [],
      curIndex: null,
      test:
        '<p>近日，《人民日报》连续刊文点赞天猫，以《信心指数持续攀升，前十月实现较高增速——新消费撬动中国经济》、《向着网络强国扬帆远航》为题，指出国内消费品零售总额不断攀升、中国消费者信心指数持续增长，其中天猫的推动作用密不可分，新零售新消费正成功撬动中国经济甚至是全球经济。<br><br>“东西买多了不想拎回家？如今，借助天猫新零售，商场已经可以快递上门。”<br><br><br></p><p>近日，《人民日报》连续刊文点赞天猫，以《信心指数持续攀升，前十月实现较高增速——新消费撬动中国经济》、《向着网络强国扬帆远航》为题，指出国内消费品零售总额不断攀升、中国消费者信心指数持续增长，其中天猫的推动作用密不可分，新零售新消费正成功撬动中国经济甚至是全球经济。<br><br>“东西买多了不想拎回家？如今，借助天猫新零售，商场已经可以快递上门。”<br><br><br></p><p>近日，《人民日报》连续刊文点赞天猫，以《信心指数持续攀升，前十月实现较高增速——新消费撬动中国经济》、《向着网络强国扬帆远航》为题，指出国内消费品零售总额不断攀升、中国消费者信心指数持续增长，其中天猫的推动作用密不可分，新零售新消费正成功撬动中国经济甚至是全球经济。<br><br>“东西买多了不想拎回家？如今，借助天猫新零售，商场已经可以快递上门。”<br><br><br></p><p>近日，《人民日报》连续刊文点赞天猫，以《信心指数持续攀升，前十月实现较高增速——新消费撬动中国经济》、《向着网络强国扬帆远航》为题，指出国内消费品零售总额不断攀升、中国消费者信心指数持续增长，其中天猫的推动作用密不可分，新零售新消费正成功撬动中国经济甚至是全球经济。<br><br>“东西买多了不想拎回家？如今，借助天猫新零售，商场已经可以快递上门。”<br><br><br></p><p>近日，《人民日报》连续刊文点赞天猫，以《信心指数持续攀升，前十月实现较高增速——新消费撬动中国经济》、《向着网络强国扬帆远航》为题，指出国内消费品零售总额不断攀升、中国消费者信心指数持续增长，其中天猫的推动作用密不可分，新零售新消费正成功撬动中国经济甚至是全球经济。<br><br>“东西买多了不想拎回家？如今，借助天猫新零售，商场已经可以快递上门。”<br><br><br></p><p>近日，《人民日报》连续刊文点赞天猫，以《信心指数持续攀升，前十月实现较高增速——新消费撬动中国经济》、《向着网络强国扬帆远航》为题，指出国内消费品零售总额不断攀升、中国消费者信心指数持续增长，其中天猫的推动作用密不可分，新零售新消费正成功撬动中国经济甚至是全球经济。<br><br>“东西买多了不想拎回家？如今，借助天猫新零售，商场已经可以快递上门。”<br><br><br></p>'
    };
  },
  computed: {},
  mounted() {
    this.getArticleList();
  },
  methods: {
    editIndexCur() {
      const self = this;
      this.curIndex = 0;
      self.lower();
      setTimeout(function () {
        self.getScrollHieght();
      }, 100);
    },
    async getArticleList() {
      const self = this;
      const arry = this.idArr;
      console.log('asdfasdf', arry);
      Promise.all(
        arry.map(function (id) {
          return new Promise(function (resolve, reject) {
            getArticleDetails(id).then((data) => {
              resolve(data.data);
            });
          });
        })
      ).then(function (data) {
        self.articleList = data;
        self.$emit('getArticleTitle', data);
      });
    },
    center() {
      const self = this;
      if (this.curIndex < this.articleList.length - 1) {
        this.curIndex++;
        self.lower();
        setTimeout(function () {
          self.getScrollHieght();
        }, 10);
        return false;
      }
      this.curIndex = null;
      this.$emit('artPopCenter', true);
      console.log('确认');
    },
    lower(e) {
      this.notArriveBottom = false;
    },
    getScrollHieght() {
      // 判断文章长度是否足够出现滚动条
      let articleHeight = '';
      let articleParentHeight = '';
      uni
        .createSelectorQuery()
        .in(this)
        .select('.scrollHeight')
        .boundingClientRect()
        .exec((res) => {
          console.log(111, res);
          articleHeight = res[0].height;
          uni
            .createSelectorQuery()
            .in(this)
            .select('.scrollParentHeight')
            .boundingClientRect()
            .exec((res) => {
              articleParentHeight = res[0].height;
              console.log(articleHeight, articleParentHeight);
              if (articleHeight + 50 <= articleParentHeight) {
                this.notArriveBottom = false;
              } else {
                this.notArriveBottom = true;
              }
            });
        });
    }
  }
};
</script>

<style lang="scss">
.popBox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  .popBody {
    background-color: #fff;
    border-radius: 24rpx;
    width: 700rpx;
    height: 75%;
    padding: 70rpx 0;
    margin: 0 auto;
    position: fixed;
    left: 50%;
    top: 6%;
    transform: translate(-50%, 0);
    z-index: 9999;
    overflow: hidden;
    .head {
      position: fixed;
      top: 0%;
      left: 50%;
      transform: translate(-50%, 0);
      padding: 14rpx 0;
      width: 700rpx;
      text-align: center;
      background-color: #f3f3f3;
      font-size: 32rpx;
      z-index: 10;
    }
    .popCon {
      padding: 24rpx;
      font-size: 28rpx;
      height: 91%;
      padding-top: 50rpx;
      overflow-y: scroll;
    }
    .popFoot {
      width: 700rpx;
      bottom: 0;
      z-index: 10;
      display: flex;
      font-size: 32rpx;

      .spans {
        flex: 1;
        padding: 18rpx 28rpx;
        text-align: center;
      }
      .close {
        background-color: #f3f3f3;
      }
      .center {
        background-color: #f34e1c;
        color: #fff;
        &.gray {
          background: white;
          color: #e8e8e8;
          border-top: 1px solid #e8e8e8;
        }
      }
    }
  }
}
.scroll-Y {
  height: 100%;
  z-index: 99999;
  position: relative;
}
</style>
